<template>
<van-popup v-model="showYkbPanel" position="right" :overlay="false" class="ykb-panel">
  <van-nav-bar title="益康币" left-arrow @click-left="closeYbkPanel" right-text="益康币明细" left-text="返回" @click-right="openYkbDetailPanel">
  </van-nav-bar>
  <div class="ykb-panel-bd">
    <van-icon name="gold-coin" />
    <span class="name">我的益康币</span>
    <span class="price">￥115.88</span>
    <van-button size="large" class="btn" @click="recharge">充值</van-button>
    <span class="rate" @click="openMoreIncrementService">随时支付并享受收益></span>
  </div>
    <!-- 益康币明细 -->
   <ykb-detail-panel :showYkbDetailPanel="showYkbDetailPanel" @closeYkbDetailPanel="closeYkbDetailPanel"></ykb-detail-panel>
   <!-- 更多增值服务面板 -->
   <more-increment-service :showMoreIncrementService="showMoreIncrementService" @closeMoreIncementService="closeMoreIncementService"></more-increment-service>
</van-popup>
</template>

<script>
export default {
  props: ['showYkbPanel'],
  data () {
    return {
      showYkbDetailPanel: false, // 是否显示益康币
      showMoreIncrementService: false, // 是否显示更多增值服务
    }
  },
  methods: {
    closeYbkPanel() {
      this.$emit('closeYbkPanel');
    },
    // 打开益康币明细面板
    openYkbDetail() {},
    // 充值
    recharge() {
      this.$dialog.alert({
        title: '充值',
        message: '暂不能使用充值功能'
      }).then(() => {
        // on close
      });
    },
    // 关闭益康币明细面板
    closeYkbDetailPanel () {
      this.showYkbDetailPanel = false
    },
    // 显示益康币明细面板
    openYkbDetailPanel() {
      this.showYkbDetailPanel = true
    },
    // 打开更多增值服务面板
    openMoreIncrementService () {
      this.showMoreIncrementService = true
    },
    // 关闭更多增值服务面板
    closeMoreIncementService () {
      this.showMoreIncrementService = false
    },
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.ykb-panel {
    // background-color: #f2f2f2;
    width: 100%;
    height: 100%;
    &-bd {
        margin-top: px2rem(80px);
        display: flex;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        align-content: center;
        .name {
            @include font-dpr(14px);
            margin: px2rem(20px) 0;
        }
        .price {
            @include font-dpr(30px);
            font-weight: bolder;
        }
        .btn {
            width: 80%;
            margin: px2rem(30px) 10%;
            height: px2rem(60px);
            line-height: px2rem(60px);
            background-color: #1c8c24;
            color: #fff;
        }
        .rate {
            color: #1e5b93;
            @include font-dpr(14px);
        }
        .van-icon {
            color: #999127;
            @include font-dpr(70px);
        }
    }
}
</style>
